<template>
  <div class="page">
    <van-form @submit="submitAction" class="section pitch_default">
      <van-cell-group inset class="row">
        <van-field
          v-model="formState.introduce"
          name="introduce"
          rows="5"
          autosize
          type="textarea"
          placeholder="请输入商品介绍"
          show-word-limit
        />

        <van-field name="uploader">
          <template #input>
            <van-uploader
              v-model="formState.picture"
              reupload
              max-count="1"
              accept="image/*"
              :after-read="uploadAction"
            />
          </template>
        </van-field>
      </van-cell-group>

      <van-cell-group inset class="row">
        <Picker
          v-model="formState.type"
          name="type"
          label="商品类型"
          placeholder="请您选择商品类型"
          :columns="[
            { text: '杭州', value: 'Hangzhou' },
            { text: '宁波', value: 'Ningbo' },
            { text: '温州', value: 'Wenzhou' },
            { text: '绍兴', value: 'Shaoxing' },
            { text: '湖州', value: 'Huzhou' },
          ]"
        >
        </Picker>
        <Picker
          v-model="formState.region"
          name="region"
          label="发布区域"
          placeholder="请您选择发布区域"
          :columns="[
            { text: '杭州', value: 'Hangzhou' },
            { text: '宁波', value: 'Ningbo' },
            { text: '温州', value: 'Wenzhou' },
            { text: '绍兴', value: 'Shaoxing' },
            { text: '湖州', value: 'Huzhou' },
          ]"
        >
        </Picker>
        <van-field
          v-model="formState.price"
          name="price"
          label="价格"
          placeholder="请输入价格"
          :rules="[{ required: true, message: '请输入价格' }]"
        />

        <van-field
          v-model="formState.phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
      </van-cell-group>

      <van-cell-group inset class="row">
        <van-button round block type="primary" native-type="submit">
          确认发布
        </van-button>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script>
import { defineComponent, computed, reactive, ref } from 'vue';

import { navigate } from '@/service/navigate';
import { Picker } from '@/components';
import { createGood } from '@/api/good.service';

export default defineComponent({
  name: 'Publish',
  components: {
    Picker,
  },
  setup() {
    const defaultFormState = {
      introduce: '',
      type: undefined,
      region: undefined,
      price: '',
      phone: '',
      picture: [],
    };

    const formState = ref({ ...defaultFormState });
    const submitAction = state => {
      createGood(state).then(() => {
        formState.value = { ...defaultFormState };
      });
    };

    const uploadAction = file => {
      const formData = new FormData();
      formData.append('file', file.file);

      uni.request({
        url: '你的接口地址',
        method: 'POST',
        header: {
          'Content-Type': 'multipart/form-data',
        },
        data: formData,
        success(res){
          
        },
        fail(){
          uni.showToast({
            icon: 'fail',
            title: '图片上传失败',
            duration: 1000
          });
        }
      });
    };

    return {
      formState,
      submitAction,
      uploadAction,
    };
  },
});
</script>

<style>
page {
  background: #f7f7f7;
}
</style>
